<script setup>
import { ref, reactive, toRaw } from 'vue'
import { service, cache } from '@utils'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refresh'])

defineProps({
    types: Array
})

const visible = ref(false)
const formRef = ref()

const state = reactive({
    param: {}
})

const open = async (item) => {
    const res = await service.sys.operateLogDet(item.id)

    state.param = { ...res }
    visible.value = true
}

const close = () => {
    visible.value = false
    // state.param = {}
}
//把方法暴露给父组件
defineExpose({
    open
})
</script>
    
    <template>
    <el-dialog v-model="visible" title="操作日志详细" center :close-on-click-modal="false" @close="close"
        destroy-on-close :width="500">
        <section>
            <el-form :model="state.param" ref="formRef" label-width="120px" label-suffix=":" onsubmit="return false;">
                <el-form-item label="日志ID">
                    <el-input v-model="state.param.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="响应时间(毫秒)">
                    <el-input v-model="state.param.costTime" disabled></el-input>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-input v-model="state.param.createBy" disabled></el-input>
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-input v-model="state.param.createTime" disabled></el-input>
                </el-form-item>
                <el-form-item label="请求IP">
                    <el-input v-model="state.param.ip" disabled></el-input>
                </el-form-item>
                <el-form-item label="方法名称">
                    <el-input v-model="state.param.method" disabled></el-input>
                </el-form-item>
                <el-form-item label="操作地点">
                    <el-input v-model="state.param.operateLocation" disabled></el-input>
                </el-form-item>
                <el-form-item label="请求参数">
                    <el-input v-model="state.param.operateParam" disabled></el-input>
                </el-form-item>
                <el-form-item label="操作人类别">
                    <el-input v-model="state.param.operateType" disabled></el-input>
                </el-form-item>
                <el-form-item label="请求方式">
                    <el-input v-model="state.param.requestMethod" disabled></el-input>
                </el-form-item>
                <el-form-item label="响应结果">
                    <el-input v-model="state.param.response" disabled></el-input>
                </el-form-item>
                <el-form-item label="操作前快照">
                    <el-input v-model="state.param.snapshot" disabled></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="state.param.status" disabled></el-input>
                </el-form-item>
                <el-form-item label="模块标题">
                    <el-input v-model="state.param.title" disabled></el-input>
                </el-form-item>
                <el-form-item label="业务类型">
                    <el-input v-model="state.param.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="请求url">
                    <el-input v-model="state.param.url" disabled></el-input>
                </el-form-item>
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
            </span>
        </template>
    </el-dialog>
</template>
    